<!-- home page f1组件 -->
<template>
  <div class="f1-adv-container">
    <!-- 插入图片 -->
    <div class="f1-adv-container">
      <img src="@/assets/images/e-commerce/home-f1.png" class="f1-adv-img" />
    </div>

    <!-- 通知和菜单栏 -->
    <div class="f1-adv-notice">
      <el-row>
        <!-- 左边通知 -->
        <el-col :span="15" class="f1-adv-notice-left">
          <el-button link class="f1-adv-notice-left-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>关于公司名称及信息被盗用的严正声明。</span>
          </el-button>
        </el-col>
        <!-- 右边菜单栏 -->
        <el-col :span="9" class="f1-adv-notice-right">
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <!-- 分隔符 -->
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
          <el-button link class="f1-adv-notice-right-btn">
            <SvgIcon name="loudspeaker" color="red"></SvgIcon>
            <span>链接</span>
            <span class="f1-adv-notice-right-btn-split">|</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import Index from '../SvgIcon/index.vue'
// 引入组件avg
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>

<style lang="scss" scoped>
.f1-adv-container {
  //宽度100% 高度120px
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  //背景颜色
  background-color: var.$background-color;
  //border: 1px solid #ff0000;
  margin-top: 2px;
  overflow-x: auto;

  .f1-adv-container {
    width: 100%;
    flex: 0 0 80%;
    .f1-adv-img {
      height: 80%; /* 设置高度以防止过度拉伸 */
      max-width: none; /* 确保没有其他限制图片宽度的样式 */
    }
  }

  .f1-adv-notice {
    width: 100%;
    //高度占满剩余空
    flex: 1;
    //background-color: #59ca0e;
    .f1-adv-notice-left {
      display: flex;

      .f1-adv-notice-left-btn {
        //居中
        //border: 1px solid #ff0000;
        margin-left: 19%;
        color: red;
      }
    }
    .f1-adv-notice-right {
      display: flex;
      white-space: nowrap;
      overflow-x: auto;
      //border: 2px solid #0000ff;
      .f1-adv-notice-right-btn {
        .f1-adv-notice-right-btn-split {
          margin-left: 13px;
          //border: 1px solid #0000ff;
        }
      }
    }
  }
}
</style>
